<template>
    <div class="Avie_classification_box">
        <div class="Avie_classification_box_head">
            <BaseTable  
                ref="Tablehead"
                :SelectionSwitch='SelectionSwitch' 
                :tableData='[{}]' :tableHead='tableHead' 
                :allSelection='allSelection'
                @ControlHandler='ControlHandler' 
                @tableReloadHandler='tableReloadHandler' 
                @SelectAllHandler='SelectAllHandler'
            />
        </div>
        <div class="Avie_classification_box_body">
            <div v-for="(el,index) in tableData" :key="index">
                <div class="Avie_classification_class">
                    <span :class="[open[index]?'down':'up','slide']" @click="Down(index)">
                        <i class="el-icon-arrow-down"></i>
                    </span>
                    <el-checkbox v-if="SelectionSwitch" @change="CheckBoxChange(index)" v-model="checkBox[index]" style="margin-right:10px;"></el-checkbox>
                    <el-tooltip  v-for="(item,index_1) in ClassificationType" :key="index+''+index_1" effect="dark" :content="el[item.key]" placement="top">
                        <span class="option_">
                            {{item.label}}： {{el[item.key]}}
                        </span>
                    </el-tooltip>
                </div>
                <div class="Avie_classification_data" :ref="'data'+index">
                    <BaseTable :ref="'table'+index" :ShowHeader='false' Height='auto' :ClassificationIndex='index'  :SelectionSwitch='SelectionSwitch' :tableData='el.classificationList' :tableHead='tableHead' @ControlHandler='ControlHandler' @tableReloadHandler='tableReloadHandler' @SelectChange='SelectChange' />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        tableData:{
            type:Array,
            default:()=>[],
        },
        tableHead:{
            type:Array,
            default:()=>[],
        },
        SelectionSwitch:{
            type:Boolean,
            default:true,
        },
        ClassificationType:{
            type:Array,
            default:()=>[],
        },
    },
    data(){
        return{
            checkBox:this.tableData.map(el=>false),
            open:this.tableData.map(el=>true),
            selectionList:this.tableData.map(el=>[]),
            allSelection:false,
            allLength:0,
        }
    },
    mounted() {
        setTimeout(this.HeightSet,300);
        this.allLength = 0;
        this.tableData.forEach(el=>{
            this.allLength += el.classificationList.length;
        })
    },
    watch: {
        tableData:{
            deep:true,
            handler:function(v){
                this.checkBox = v.map(el=>false);
                this.open = v.map(el=>true);
                this.selectionList = v.map(el=>[]);
                this.allLength = 0;
                this.tableData.forEach(el=>{
                    this.allLength += el.classificationList.length;
                })
                this.$nextTick(()=>{
                    this.HeightSet();
                })
            }
        },
    },
    methods: {
        HeightSet(){
            this.open.forEach((el,index)=>{
                let target = this.$refs[`data${index}`][0];
                let {height} = target.firstChild.getBoundingClientRect();
                if(el){
                    target.style.height = `${height}px`;
                }
            })
        },
        ControlHandler(type,data){
            this.$emit('ControlHandler',type,data);
        },
        Down(index){
            let target = this.$refs[`data${index}`][0];
            let {height} = target.firstChild.getBoundingClientRect();
            this.open[index] = !this.open[index];
            if(this.open[index]){
                target.style.height = `${height}px`;
            }else{
                target.style.height = `${0}px`;
            }
            this.$forceUpdate();
        },
        SelectAllHandler(selection,select){
            let l = this.checkBox.map(el=>{
                return select;
            });
            this.checkBox = l;
            this.open.forEach((el,index)=>{
                if(select){
                    this.$refs[`table${index}`][0].$refs['Table'].clearSelection();
                    this.$refs[`table${index}`][0].$refs['Table'].toggleAllSelection();
                }else{
                    this.$refs[`table${index}`][0].$refs['Table'].clearSelection();
                }
            })
            this.$nextTick(()=>{
                this.allSelection = select;
            })
        },
        SelectChange(selection,index){
            this.selectionList[index] = selection;
            this.SelAllJudge(this.selectionList);    
        },  
        CheckBoxChange(index){
            let s = this.checkBox[index];
            if(s){
                this.$refs[`table${index}`][0].$refs['Table'].clearSelection();
                this.$refs[`table${index}`][0].$refs['Table'].toggleAllSelection();
            }else{
                this.$refs[`table${index}`][0].$refs['Table'].clearSelection();
            }
        },
        SelAllJudge(v){
            let sel = 0;
            v.forEach(el=>{
                sel += el.length;
            })
            if(sel===0){
                this.allSelection = false;
            }else if(sel===this.allLength){
                this.allSelection = true;
            }
        },
    },
}
</script>

<style lang="scss" scoped>

</style>